<template>
  <view class="checkbox" :class="[`checkbox--${getTextPosition}`, { 'checkbox--disabled': disabled }]">
    <m-icon
      :name="getIconName"
      :size="iconSize"
      :color="disabled || !checked ? '#d9d9d9' : 'red'"
      class="i-checked"
      :class="{ 'i-checked__bg': !(disabled || !checked) }"
      @click="handleClick('icon')"
    />
    <view class="checkbox__content" @click="handleClick('content')">
      <slot />
    </view>
  </view>
</template>

<script lang="ts">
import {
  defineComponent,
  inject,
  onMounted,
  reactive,
  toRefs,
  computed,
  watch,
  onUnmounted,
} from '@vue/composition-api'

export default defineComponent({
  props: {
    value: {
      type: [Boolean, Number],
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    iconSize: {
      type: [String, Number],
      default: 40,
    },
    iconName: {
      type: String,
      default: 'check-normal',
    },
    iconActiveName: {
      type: String,
      default: 'checked',
    },
    label: {
      type: [String, Number],
      default: null,
    },
    textPosition: {
      type: String,
      default: 'right',
    },
    contentDisabled: {
      type: Boolean,
      default: null,
    },
    iconDisabledName: {
      type: String,
      default: '',
    },
  },
  options: {
    virtualHost: true, //  将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定
  },
  emits: ['input', 'change'],
  setup(props, { emit }) {
    const checkboxParent: any = inject('checkboxParent', null)
    const state = reactive({
      checked: props.value,
    })
    const setCheck = (label, value) => {
      state.checked = value.includes(label)
    }
    const getTextPosition = computed(() => (checkboxParent ? checkboxParent.textPosition : props.textPosition))
    let label
    const handleClick = (position) => {
      if (position === 'content') {
        if (getContentDisabled.value) {
          return
        }
      }
      if (props.disabled) {
        return
      }
      if (checkboxParent && checkboxParent.checkboxClick) {
        const rtv = checkboxParent.checkboxClick(label)

        if (rtv === false) {
          return
        }
      }
      emit('change', {
        value: !state.checked,
        label,
      })
      emit('input', !state.checked)
    }
    const getIconName = computed(() => {
      if (state.checked) {
        return props.iconActiveName
      }
      if (props.disabled) {
        return 'check-disabled'
      }
      if (props.iconDisabledName) {
        return props.iconDisabledName
      }
      return props.iconName
    })

    const getContentDisabled = computed(() => {
      if (props.contentDisabled != null) {
        return props.contentDisabled
      }

      if (checkboxParent && checkboxParent.contentDisabled != null) {
        return checkboxParent.contentDisabled
      }

      return false
    })

    onMounted(async () => {
      if (checkboxParent && checkboxParent.addCheckbox) {
        label = props.label !== null ? props.label : checkboxParent.checkboxList.length

        // console.log('label', props.label, label)

        checkboxParent.addCheckbox({
          label,
          disabled: props.disabled,
          vm: {
            setCheck,
          },
        })
      }
    })

    onUnmounted(async () => {
      if (checkboxParent && checkboxParent.removeCheckbox) {
        checkboxParent.removeCheckbox(label)
      }
    })

    watch(
      () => props.value,
      (newVal) => {
        state.checked = newVal
      }
    )

    return {
      ...toRefs(state),
      setCheck,
      handleClick,
      getTextPosition,
      getIconName,
      getContentDisabled,
    }
  },
})
</script>
<style lang="scss" scoped>
.checkbox {
  display: flex;
  align-items: center;
  &__content {
    flex: 1;
    // min-width: 0;
    color: $--font-primary-c;
  }
  .i-checked {
    margin-right: 12rpx;
    width: 32rpx;
    &__bg {
      background-color: $--bg-content-c;
      border-radius: 100%;
      height: 32rpx;
      line-height: 32rpx;
    }
  }
  &--left {
    flex-direction: row-reverse;
    .i-checked {
      margin-left: 12rpx;
    }
  }
  &--disabled {
    .checkbox__content {
      color: $--font-secondary-c;
    }
  }
}
</style>
